<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVVM模型</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 
    MVVM模型
    1。M:模型(Model) : data中的数据2.V:视图(View):模板代码
    3.VM:视图模型(ViewModel): Vue实例
    观察发现:
    1.data中所有的属性,最后都出现在了vm身上。
    2.vm身上所有的属性及 Vue原型上所有属性，在Vue模板中都可以直接使用。
 -->    

    <div id="root">                         |
        <h1>学校名称:{{name}}</h1>           | ==> View
        <h1>学校地址:{{address}}</h1>        |
        <h1>测试:{{1+1}}</h1>          <!--      {{中还可以写表带式}} 还可以写vm身上和Vue原型上的东西都可以使用( 例如{{$options}},{{_inactive}} ) -->
    </div>                                  |
    
</body>
<script>
    const vm = new Vue({                         //    ==>  ViewModel
        // const的作用就是将变量声明为一个常量，不能被修改，不可以再次赋值，它的指向是不可以改变的，只能指向某处固定区域，不能再指向其它地方
        el:'#root',
        data:{                          
            name:'School',            // |
            address:'Address',        // |  ==> Model
        }             
    });
    console.log(vm);
</script>
</html>